<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import type {aiRoleOrderCreateType} from "@/api/ai_role_api";
import {aiRoleOrderCreateApi} from "@/api/ai_role_api";
import {Message} from "@arco-design/web-vue";

interface aiRoleOrderDetail {
  roleID: number
  type: number
  title: string
}
interface Props {
  visible: boolean
  detail: aiRoleOrderDetail
}

const props = defineProps<Props>()

const emits = defineEmits(["update:visible", "ok", "update:detail"])

function cancel() {
  data.reason = ""
  emits("update:visible", false)
}

const data = reactive<aiRoleOrderCreateType>({
  roleID: 0,
  reason: "",
  type: 0,
})

const formRef = ref()

async function create() {
  const val = await formRef.value.validate()
  if (val) {
    return
  }
  data.type = props.detail.type
  data.roleID = props.detail.roleID
  const res = await aiRoleOrderCreateApi(data)
  if (res.code){
    Message.error(res.msg)
    return false
  }
  Message.success(res.msg)
  emits("update:visible", false)
  emits("ok")
}

const title = computed(()=>{
  return `${props.detail.title} ${props.detail.type === 1 ? '角色推荐' : '角色删除' } 工单`
})

</script>

<template>
  <div class="f_ai_role_order_modal">
    <a-modal :title="title" :visible="props.visible" @cancel="cancel" :on-before-ok="create">
      <a-form :model="data" ref="formRef">
        <a-form-item label="申请理由" field="reason" validate-trigger="blur" :rules="[{required: true}]">
          <a-textarea v-model="data.reason" placeholder="申请理由" :auto-size="{minRows: 4, maxRows: 5}"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped lang="less">

</style>